<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打地鼠</title>

</head>
<style>
    *{padding: 0;margin: 0;}
    body {
        background-image: url(https://tse4-mm.cn.bing.net/th/id/OIP-C.ddC0xPAAN7QZG_huA6JHCQHaHa?w=197&h=198&c=7&r=0&o=5&pid=1.7);
    }

    #start {
        width: 100px;
        height: 44px;
        background-color: gray;
        position: absolute;
        left: 48%;
        top: 48%
    }

    img {
        width: 150px;
        position: absolute;
    }
    #border{
        width: 300px;
        height: 50px;
        border: 5px solid #000;
    }
    #blood{
        width: 300px;
        height: 50px;
        background-color:red;
    }
    span{
        font-size: 30px;
        margin-left: 20px;
    }
</style>

<body>
    <button id="start">开始</button>
</body>
<div id="border">
    <div id="blood"></div>
</div><span>血量</span><span>分数：0</span>

</html>
<script>
    class hitMouse {
        constructor() {
            this.start = this.$("#start")
            this.blood = this.$("#blood")
            this.startClick()
        }
        //设置$ 去获取元素的方法
        $ = selector => document.querySelector(selector)
        //start 按钮被按下的处理事件
        startClick() {
            this.start.onclick = () => {
                this.start.style.display = "none"
                this.mouseAdd()
            }
        }
        //处理地鼠出现
        mouseAdd() {
            let num = 0
            let num1 = 100
            const timer = setInterval(() => {
                let img = document.createElement("img")
                img.src = "https://tse1-mm.cn.bing.net/th/id/R-C.219ee5b89c2fd366a04293f6b224ee60?rik=isTI7LFpfjGSVQ&riu=http%3a%2f%2fimg.wxcha.com%2ffile%2f201611%2f29%2f7b8a349744.gif&ehk=XieXhimwlFOxwKyFS%2bRDxFtf2kJQ3YAUFoBU4IENS8A%3d&risl=&pid=ImgRaw&r=0"
                document.body.appendChild(img);
                this.mouseMaxMoveX = document.documentElement.clientWidth - img.offsetWidth
                this.mouseMaxMoveY = document.documentElement.clientHeight - img.offsetHeight
                let mouseX = Math.floor(Math.random() * (this.mouseMaxMoveX + 1))
                let mouseY = Math.floor(Math.random() * (this.mouseMaxMoveY + 1))
                img.style.left = mouseX + "PX"
                img.style.top = mouseY + 'px'
                num1 -=2
                img.onclick = function () {
                    document.body.removeChild(this)
                    num ++
                    // this.number.innerText = "分数："+num
                    num1 ++
                }
                const number = this.$("span:nth-of-type(2)")
                    number.innerText = "分数："+num
                this.blood.style.width = num1 * 3 +"px"
            }, 800)
        }

    }
    new hitMouse()
</script>